<template>
    <div id="gender" class="person-detail">
        <div>
                <van-nav-bar
                    title="修改性别"
                    right-text="保存"
                    left-arrow
                    @click-left="back"
                    @click-right="save"
                 />
            </div>
       <van-radio-group v-model="radio">
            <van-cell-group>
                <van-cell title="男" clickable @click="radio = '1'" >
                    <van-radio checked-color="#DC4630" name="1" v-model="checked" />
                </van-cell>
                <van-cell title="女" clickable @click="radio = '2'">
                    <van-radio checked-color="#DC4630" name="2" v-model="checked" />
                </van-cell>
            </van-cell-group>
        </van-radio-group>
    </div>
</template>
<script>
import {mapActions,mapGetters,mapMutations} from 'vuex'
export default {
    name: 'Mine',
    components: {},
    data() {
        return {
            radio:this.$store.state.person.gender,
            checked:this.$store.state.person.gender,  
        }
    },
    computed: {
        // ...mapGetters(
        //      ['gender']
        //  )
    },
    created() {},
    mounted() {},
    methods: {
        ...mapActions(
          ['getGender']
        ),
        ...mapMutations(
            ['SET_GENDER']
        ),
        back(){
            this.$router.go(-1)
        },
        save(){
            this.SET_GENDER(this.radio)
            this.$toast('');
            const timer = setInterval(() => {
                this.$toast.clear()
                this.$router.push({path:'/person/personaldetail'})
                clearInterval(timer);
            }, 1000);
            console.log(this.radio)
        },
    }
}
</script>
<style lang="scss" scoped>
@import '../style/index.scss';
</style>
